<route lang="jsonc" type="page">
{
  "layout": "tabbar",
  "style": {
    // 'custom' 表示开启自定义导航栏，默认 'default'
    "navigationStyle": "custom",
    "navigationBarTitleText": "登录"
  }
}
</route>

<script setup lang="ts">
import { ref } from 'vue'
import Verify from '@/components/verifition/index.vue'
import { useDictStore } from '@/store/dict'
import { useUserStore } from '@/store/user'

const store = useUserStore()
const dictStore = useDictStore() // 获取 Vuex store
// const dictStore = useDictStoreWithOut()

const verify = ref()
const captchaEnabled = ref(true)

const agreed = ref(false)
const formRef = ref()
const loginForm = ref({
  username: 'admin',
  password: 'admin123',
  // password: "",
  captchaVerification: '',
})
const formRules: any = {
  username: [
    {
      required: true,
      message: '请输入用户名',
      trigger: ['blur', 'change'],
    },
    {
      validator: (value: any) => {
        if (value) {
          return Promise.resolve()
        }
        else {
          return Promise.reject(new Error('用户名不能为空'))
        }
      },
      trigger: ['blur'], // validator 也建议加 trigger
    },
  ],
  password: [
    {
      required: true,
      message: '请输入密码',
      trigger: ['blur', 'change'],
    },
    // 正则判断为字母或数字
    // {
    //   pattern: /^[0-9a-zA-Z]*$/g,
    //   // 正则检验前先将值转为字符串
    //   transform(value: any) {
    //     return String(value)
    //   },
    //   message: '只能包含字母或数字',
    // },
    {
      validator: (value: any) => {
        if (value.length >= 5 && value.length <= 12) {
          return Promise.resolve()
        }
        else {
          return Promise.reject(new Error('用户名不能为空'))
        }
      },
      trigger: 'blur',
    },
  ],
}
async function handleLogin() {
  // 校验表单
  if (!formRef.value)
    return
  const valid = await formRef.value.validate()
  console.log('valid', valid)
  // const { valid, errors } = await formRef.value.validate();
  if (!valid) {
    // console.log('表单校验未通过:', errors);
    return // ✅ 校验失败，终止后续代码
  }
  // await pwdLogin({})
  if (captchaEnabled.value && verify.value) {
    verify.value.show()
  }
  else {
    console.log('没进来')
    await pwdLogin({})
  }
}
async function pwdLogin(captchaParams: any) {
  uni.showLoading({ title: '登录中，请耐心等待...' })
  loginForm.value.captchaVerification = captchaParams.captchaVerification
  try {
    await store.login(loginForm.value)
    // console.log('res', res);
    loginSuccess()
  }
  finally {
    uni.hideLoading()
  }
}
async function loginSuccess() {
//   await store.setUserInfo()
  await dictStore.setDictMap()
  uni.reLaunch({ url: '/pages/index/index' })
}
</script>

<template>
  <view class="login-page">
    <!-- 背景图 -->
    <image class="bg" src="@/static/bg.jpg" mode="aspectFill" />
    <!-- 验证码组件 -->
    <Verify
      ref="verify"
      mode="pop"
      captcha-type="blockPuzzle"
      :img-size="{ width: '330px', height: '155px' }"
      style="position: fixed; top: 10%;    z-index: 9999;"
      @success="pwdLogin"
    />
    <!-- 遮罩层 -->
    <view class="overlay" />

    <!-- 登录容器 -->
    <view class="login-container">
      <!-- 系统标题 -->
      <view class="system-title">
        <view class="title-text">
          城西应急局仓储管理系统
        </view>
        <view class="title-divider" />
      </view>

      <!-- 登录表单卡片 -->
      <view class="form-card">
        <wd-form
          ref="formRef"
          :model="loginForm"
          :rules="formRules"
        >
          <!-- 用户名输入 -->
          <view class="form-item">
            <wd-input
              v-model="loginForm.username"
              prefix-icon="user"
              size="large"
              prop="username"
              placeholder="请输入账号"
              no-border
              custom-style="background-color: rgba(255,255,255,0.15); backdrop-filter: blur(15px); color:#fff"
            />
          </view>

          <!-- 密码输入 -->
          <view class="form-item">
            <wd-input
              v-model="loginForm.password"
              prefix-icon="lock-on"
              size="large"
              prop="password"
              show-password
              placeholder="请输入密码"
              no-border
              custom-style="background-color: rgba(255,255,255,0.15); backdrop-filter: blur(15px); color:#fff"
            />
          </view>

          <!-- 登录按钮 -->
          <view class="login-btn-container mt-10">
            <wd-button
              type="primary"
              size="large"
              custom-class="login-btn"
              custom-style="width: 100%; height: 80rpx; background: linear-gradient(90deg, #1E40AF, #3B82F6); border-radius: 12rpx; font-size: 32rpx;"
              @click="handleLogin"
            >
              <text class="text-white font-medium">登录</text>
            </wd-button>
          </view>
        </wd-form>
      </view>

      <!-- 版权信息 -->
    </view>
  </view>
</template>

<style lang="scss" scoped>
.wd-icon.wd-input_icon.wd-icon-user {
  color: red; /* 改成浅灰色适配蓝色背景 */
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.5)); /* 增加阴影，让图标更立体 */
}

/* 密码输入框图标 */
.wd-icon.wd-input_icon {
  color: #e0e0e0;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.5));
}
.login-page {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;

  .bg {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
    filter: brightness(0.8); // 降低背景亮度，提升文字可读性
  }

  .overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(10, 30, 80, 0.7), rgba(20, 50, 120, 0.5));
    z-index: 1;
  }

  .login-container {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    padding: 20rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .system-title {
      margin-bottom: 40rpx;
      text-align: center;

      .title-text {
        font-size: 48rpx;
        font-weight: 600;
        color: #ffffff;
        text-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.3);
        margin-bottom: 15rpx;
        letter-spacing: 2rpx;
      }

      .title-divider {
        width: 180rpx;
        height: 6rpx;
        background: linear-gradient(90deg, transparent, #409eff, transparent);
        margin: 0 auto;
        border-radius: 3rpx;
      }
    }

    .form-card {
      width: 100%;
      max-width: 680rpx;
      padding: 50rpx 40rpx;
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(20px);
      border-radius: 20rpx;
      box-shadow: 0 10rpx 40rpx rgba(0, 0, 0, 0.2);
      border: 1rpx solid rgba(255, 255, 255, 0.2);

      .form-item {
        margin-bottom: 30rpx;
        border-radius: 12rpx;
        overflow: hidden;
        transition: all 0.3s ease;

        &:focus-within {
          box-shadow: 0 0 0 3rpx rgba(64, 158, 255, 0.5);
        }
      }

      .login-btn-container {
        margin-top: 20rpx;

        .login-btn {
          transition: all 0.3s ease;
          border: none;

          &:active {
            transform: scale(0.98);
            box-shadow: 0 4rpx 15rpx rgba(0, 0, 0, 0.3);
          }
        }
      }
    }

    .copyright {
      margin-top: 60rpx;
      color: rgba(255, 255, 255, 0.7);
      font-size: 26rpx;
      letter-spacing: 1rpx;
    }
  }
}
</style>
